<template>
  <div>
    <div class="header-back">
      <div class="list-header-title">
        <p>文章管理</p>
      </div>
      <div class="list-header-search">
        <el-input
          placeholder="请输入内容"
          v-model="search"
          clearable
          class="input"
        >
        </el-input>
        <el-button type="primary" @click="this.load" icon="el-icon-search"
          >查询</el-button
        >
        <el-button type="primary" @click="openAddUser">添加</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      v-loading="loading"
      border
      fit
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="序号" width="180" sortable>
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="文章名称" width="180">
        <template slot-scope="scope">
          <p>{{ scope.row.articleName }}</p>
        </template>
      </el-table-column>
      <el-table-column label="文章分类" width="180">
        <template slot-scope="scope">
          <p>{{ scope.row.articleType }}</p>
        </template>
      </el-table-column>
      <el-table-column label="文章标签">
        <template slot-scope="scope">
          <p>{{ scope.row.articleTag }}</p>
        </template>
      </el-table-column>
      <el-table-column label="作者">
        <template slot-scope="scope">
          <p>{{ scope.row.userId }}</p>
        </template>
      </el-table-column>
      <el-table-column label="阅读量">
        <template slot-scope="scope">
          <p>{{ scope.row.articleReadCount }}</p>
        </template>
      </el-table-column>
      <el-table-column label="文章状态">
        <template slot-scope="scope">
          <p>{{ scope.row.articleState? "发布" :"弃用" }}</p>
        </template>
      </el-table-column>
      <el-table-column label="简介">
        <template slot-scope="scope">
          <p>{{ scope.row.articleRemark }}</p>
        </template>
      </el-table-column>
      <el-table-column label="最后跟新时间">
        <template slot-scope="scope">
          <p>{{ scope.row.updateTime }}</p>
        </template>
      </el-table-column>
      <el-table-column label="点赞数">
        <template slot-scope="scope">
          <p>{{ scope.row.articleStarNum }}</p>
        </template>
      </el-table-column>
      <el-table-column label="评论数">
        <template slot-scope="scope">
          <p>{{ scope.row.articleCommentNum }}</p>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="margin: 10px 0"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="pageNum"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog :title="titleValue" :visible.sync="dialogTableVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="文章名称">
          <el-input v-model="form.articleName"></el-input>
        </el-form-item>
        <el-form-item label="文章分类">
          <el-input v-model="form.articleType"></el-input>
        </el-form-item>
        <el-form-item label="文章标签">
          <el-input v-model="form.articleTag"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="form.userId"></el-input>
        </el-form-item>
        <el-form-item label="阅读量">
          <el-input v-model="form.articleReadCount"></el-input>
        </el-form-item>
        <el-form-item label="文章状态">
          <el-input v-model="form.articleState"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="form.articleRemark"></el-input>
        </el-form-item>
        <el-form-item label="最后更新时间">
          <!-- <span class="demonstration">默认</span> -->
          <el-date-picker
            v-model="form.updateTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="点赞数">
          <el-input v-model="form.articleStarNum"></el-input>
        </el-form-item>
        <el-form-item label="评论数">
          <el-input v-model="form.articleCommentNum"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
  
  <script>
import request from "@/utils/request";

export default {
  data() {
    return {
      tableData: [],
      form: {},
      loading: true,
      search: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      //  控制模态框的状态
      dialogTableVisible: false,
      //  动态表头
      titleValue: "",
    };
  },
  created() {
    this.load();
    // console.log("pageSize2",this.pageSize);
  },
  methods: {
    load() {
      this.loading = true;
      let pram = "?articleName=" + this.search;
      request
        .get("/article/query/" + this.pageNum + "/" + this.pageSize + pram)
        .then((res) => {
          this.loading = false;
          this.tableData = res.data.list;
          this.total = res.data.total;
        });
    },

    openAddUser() {
      this.dialogTableVisible = true;
      this.titleValue = "添加";
      //  清空表格
      this.form = {};
    },
    submitForm() {
      // 隐藏弹框
      this.dialogTableVisible = false;
      if (this.form.id) {
        // update
        request
          .put("/article/update", this.form)
          .then((res) => {
            // console.log('form',this.form);
            if (res) {
              // console.log("xiugai",res);
              this.$message({
                type: "success",
                message: "修改成功",
              });
              this.load();
            } else {
              this.$message.error("修改失败");
            }
          })
          .catch((err) => {
            this.$message.error("修改失败");
          });
      } else {
        // post
        request
          .post("/article/add", this.form)
          .then((res) => {
            if (res) {
              this.$message({
                type: "success",
                message: "新增成功",
              });
              this.load();
            } else {
              this.$message.error("添加失败");
            }
          })
          .catch((error) => {
            // console.log("err", error);
            this.$message.error("添加失败");
          });
      }
      this.load();
    },
    resetForm() {
      this.dialogTableVisible = false;
    },
    handleEdit(index, row) {
      console.log(index, row);
      //  动态表头
      this.titleValue = "编辑";
      //  显示模态框
      (this.dialogTableVisible = true),
        //    回显
        (this.form = row);
    },
    handleDelete(index, row) {
      // console.log(index, row);
      // console.log("ID",row.id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //发请求
          request
            .delete("/article/del/" + row.id)
            .then((res) => {
              //刷新页面
              this.load();
              // console.log(res);
              if (res.code == "0000") {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
              // this.load()
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(pageSize) {
      // 改变当前每页的个数触发
      this.pageSize = pageSize;
      this.load();
      console.log("pageSize", this.pageSize);
    },
    handleCurrentChange(pageNum) {
      // 改变当前页码触发
      this.pageNum = pageNum;
      this.load();
    },
  },
};
</script>
  
  <style lang="less" scoped>
.header-back {
  background-color: rgb(255, 255, 255);
}
.list-header-search {
  padding: 10px;
  width: 400px;
  display: flex;
  justify-content: space-between;
}
.list-header-button {
  padding: 30px 10px 15px 10px;
}
.input {
  width: 300px;
}
</style>